<template>
  <div class='container'>
    <!-- 顶部按钮部分 -->
    <div class="options">
      <!-- 左侧操作部分 -->
      <div class="optionsLeft">
        <span class="keywords">关键字：</span>
        <el-input v-model="pageInfo.keyword"></el-input>
        <span class="state">状态：</span>
        <el-select class="select" v-model="pageInfo.state" placeholder="请选择">
          <el-option label="已启用" :value="1"> </el-option>
         <el-option label="已禁用" :value="0"> </el-option>
        </el-select>
        <el-button size="mini" @click="reset">清除</el-button>
        <el-button type="primary" size="mini" @click="searchArtical">搜索</el-button>
      </div>
      <!-- 右侧操作部分 -->
      <div class="optionsRight">
        <el-button type="success" size="mini" @click="addArcitcal">新增技巧</el-button>
      </div>
    </div>
      <!-- 中间数据条数部分 -->
      <div class="numberData">
      <i class="el-icon-warning"></i>
      <span>数据一共{{ counts }}条</span>
    </div>
      <!-- 下方表格部分 -->
      <div class="table">
      <el-table :data="articalList" highlight-current-row :header-cell-style="{
        background: '#fafafa', color: '#909399'
      }">
        <el-table-column type="index" label="序号" width="50" style="backgroundColor: #1f1;">
        </el-table-column>
        <el-table-column property="title" label="文章标题" width="350" >
        </el-table-column>
        <el-table-column property="username" label="阅读数">
        </el-table-column>
        <el-table-column property="username" label="录入人">
        </el-table-column>
        <el-table-column property="createTime" label="录入时间">
         <template v-slot=" { row}">
          {{ row.createTime.substring(0, row.createTime.indexOf('.')).replace('T', ' ') }}
         </template>
        </el-table-column>
        <el-table-column property="twoLevelDirectory" label="状态">
          <template v-slot="{ row }">
            {{ row.state === 1 ? '开启' : '禁用' }}

          </template>
        </el-table-column>
        <el-table-column property="address" label="操作"  width="300">
          <template v-slot="{row}">
            <el-button type="text" @click="previewArtical(row)">预览</el-button>
            <el-button type="text" @click="changeState(row)">
              {{ row.state === 1 ? '启用' : '禁用' }}
            </el-button>
            <el-button type="text" :disabled="row.state === 1" @click="updateArtical(row)">修改</el-button>
            <el-button type="text"  :disabled="row.state === 1" @click="deleteArtical(row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
       <!-- 表格下方分页器 -->
       <div class="pagination">
      <el-pagination background layout="prev, pager,next,sizes,jumper" :total="counts" :page-size="pageInfo.pagesize"
        :page-sizes="[5, 10, 15, 20]" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <!-- 添加弹框部分 -->
    <articlesAdd :addArcitcalDialog.sync="addArcitcalDialog" @done="getArticalList"></articlesAdd>
    <!-- 查看弹框部分 -->
    <articlesPreview :previewList="previewList" :closePreviewDialog.sync="closePreviewDialog" ></articlesPreview>
    <!-- 编辑弹框部分 -->
    <articlesEditVue :editArcitcalDialog.sync="editArcitcalDialog" :editArtical="editArtical" @done="getArticalList"></articlesEditVue>
  </div>
</template>

<script>
// 引入添加弹框组件
import articlesAdd from '../components/articles-add.vue'
// 引入预览文章他那款
import articlesPreview from '../components/articles-preview.vue'
// 引入编辑弹框
import articlesEditVue from '../components/articles-edit.vue'
// 引入面试技巧的各种方法
import { list as listArtical, remove as removeArtical, detail as detailArtical, detail as detailAttical, changeState } from '@/api/hmmm/articles'

export default {
  components: {
    articlesAdd,
    articlesPreview,
    articlesEditVue
  },
  data () {
    return {
      // 控制添加弹框显示隐藏
      addArcitcalDialog: false,
      // 控制预览对话框的显示隐藏
      closePreviewDialog: false,
      // 控制编辑弹框显示隐藏
      editArcitcalDialog: false,
      value: '',
      counts: null,
      // 分页详情
      pageInfo: {
        // 当前页数
        page: 1,
        // 每页条数
        pagesize: 10,
        // 关键字
        keyword: '',
        // 状态
        state: null
      },
      // 文章列表
      articalList: [],
      // 预览的文章列表
      previewList: {},
      // 修改的文章列表
      editArtical: {}
    }
  },
  created () {
    this.getArticalList()
  },
  methods: {
    // 获取文章列表信息
    getArticalList () {
      listArtical(this.pageInfo)
        .then((res) => {
          console.log(res)
          this.articalList = res.data.items
          this.counts = res.data.counts
        })
    },
    handleCurrentChange (val) {
      console.log(val)
      this.pageInfo.page = val
      this.getArticalList()
    },
    handleSizeChange (val) {
      console.log(val)
      this.pageInfo.pagesize = val
      this.getArticalList()
    },
    // 添加弹框
    addArcitcal () {
      this.addArcitcalDialog = true
    },
    // 删除面试技巧文章
    deleteArtical (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //  点击确认之后，调用删除的接口，将本行数据传进去，
        await removeArtical(row)
        // 提示用户删除失败
        this.$message.success('删除成功')
        // 调用最新的接口数据
        this.getArticalList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 预览
    previewArtical (row) {
      detailArtical(row)
        .then((res) => {
          this.previewList = res.data
          console.log(this.previewList)
          this.closePreviewDialog = true
        })
    },
    // 搜索
    searchArtical () {
      console.log(this.pageInfo.keyword)
      this.getArticalList()
      console.log(this.articalList)
    },
    // 清除
    reset () {
      // 清除内容
      this.pageInfo = {
        page: 1,
        // 每页条数
        pagesize: 10,
        // 关键字
        keyword: '',
        // 状态
        state: null
      }
      // 重新获取数据
      this.getArticalList()
    },
    // 修改
    updateArtical (row) {
      console.log(row)
      detailAttical(row)
        .then((res) => {
          console.log(res)
          this.editArtical = res.data
          this.editArcitcalDialog = true
        })
    },
    // 改变状态
    changeState (row) {
      // 调用改变装状态的方法，
      changeState({
        id: row.id,
        // 如果当前的stated的值是1，就传0，反之亦然
        state: row.state === 1 ? 0 : 1
      })
        .then(() => {
          // 把反过来的状态覆盖给row的state
          row.state = row.state === 1 ? 0 : 1
        })
    }
  }
}
</script>

<style scoped lang="scss" >
.container {
  margin: 20px 10px;
  background-color: #fff;
  padding: 20px;
}
.options {
  width: 100%;
  height: 51px;
  display: flex;
  align-items: center;

  .optionsLeft {
    width: 75%;
    display: flex;

    .el-input {
      width: 200px;
      // height: 36px;
      margin-right: 10px;
    }
    el-select {
      margin-right: 10px;
    }
    .el-button {
      width: 56px;
      height: 32px;
      margin-left: 10px;
    }

    .keywords {
      font-size: 14px;
      font-weight: 600;
      width: 80px;
      line-height: 32px;

    }
    .state {
      display: block;
      font-size: 14px;
      font-weight: 600;
      line-height: 36px;
    }
  }

  .optionsRight {
    display: flex;
    flex: 1;
    justify-content: flex-end;

    .el-button {

      width: 97px;
      height: 32px;
    }
  }
}
.numberData {
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 20px;
    background-color: #f4f4f5;
    color: #909399;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    opacity: 1;
    display: flex;
    align-items: center;
    transition: opacity .2s;

    i {
      width: 16px;
      height: 16px;
    }

    span {
      margin-left: 5px;
      font-size: 12px;
    }
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    .el-pagination {
      ::v-deep .el-pagination__jump {
        margin-left: 0;
      }
    }
  }
</style>
